<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <children-cpn-two></children-cpn-two>
        <children-cpn-two></children-cpn-two>
        <children-cpn-two></children-cpn-two>
        <children-cpn-two></children-cpn-two>
        <children-cpn-two></children-cpn-two>
        <children-cpn-two></children-cpn-two>
        <children-cpn-two></children-cpn-two>
        <children-cpn-two></children-cpn-two>
        <!-- ref 相当于我给这个组件起了一个名字 让我们可以更加容易的找到它 -->
        <children-cpn ref="wff"></children-cpn>
        <children-cpn-two ref="wff2"></children-cpn-two>
        <children-cpn-two></children-cpn-two>
        <children-cpn-two></children-cpn-two>
        <children-cpn-two></children-cpn-two>
        <children-cpn-two></children-cpn-two>
        <children-cpn-two></children-cpn-two>
        <children-cpn-two></children-cpn-two>
        <button @click="getMsg">抢子组件的数据</button>
        <button @click="getRefMsg">以ref的形式去拿数据</button>
    </div>
    <script src="../js/vue.js"></script>
    <template id="childrenCpn">
        <div>
            {{ msg }}
        </div>
    </template>
    <template id="childrenCpnTwo">
        <div>
            {{ msg }}
        </div>
    </template>
    <script>
        const app = new Vue({
            el:'#app',
            data(){
                return {

                }
            },
            methods:{
                getMsg(){
                    console.log(this.$children)
                    console.log(this.$children[1].msg)
                },
                //通过ref的方式去拿具体某个组件里的数据
                getRefMsg(){
                    console.log(this.$refs.wff.msg)
                }
            },
            components:{
                'children-cpn':{
                    template:'#childrenCpn',
                    data(){
                        return {
                            msg:'我是一个组件中的数据'
                        }
                    }
                },
                'children-cpn-two':{
                    template:'#childrenCpnTwo',
                    data(){
                        return {
                            msg:'我是第二个组件中的数据'
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>